<template>
	<view class="relevent">
		<view class="layout files">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe64b;</span>
					<view class="topic">
						合同文件
					</view>
				</view>
			</view>
			<view class="container">
				<view class="file-list">
					<view class="file-item" v-for="(item, index) in contract.fileUrls" :key="index" @click="openFile(item)">
						{{index + 1}}.{{item.split('.').pop()}}
					</view>
				</view>
			</view>
		</view>
		<view class="layout payment">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe627;</span>
					<view class="topic">
						回款
					</view>
				</view>
				<navigator :url="`/pages/index/paymentCollection/create?params=${JSON.stringify(params)}`" class="right" hover-class="none">+新建</navigator>
				</view>
				<view class="container">
					<empty v-if="paymentEmpty" desc="暂无回款记录" height="300"></empty>
					<view class="payment-list">
						<navigator :url="`/pages/index/paymentCollection/details?id=${item.id}`" class="item" v-for="item in paymentList" :key="item.id" hover-class="none">
							<view class="top">
								<view class="title">
									回款编号：{{item.no}}
								</view>
								<view class="tag" :style="{color: `${item.color}`, borderColor: `${item.color}`}">
									{{item.statusText}}
								</view>
							</view>
							<view class="bottom">
								<view class="bot-item max">
									合同编号：{{item.contract.no}}
								</view>
								<view class="bot-item">
									回款金额：￥{{item.price}}
								</view>
								<view class="bot-item">
									汇款方式：{{item.type}}
								</view>
								<view class="bot-item">
									回款时间：{{$share.getDate(item.returnTime)}}
								</view>
								<view class="bot-item">
									创建时间：{{$share.getDate(item.createTime)}}
								</view>
							</view>
						</navigator>
					</view>
				</view>
		</view>
		<view class="layout files">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe660;</span>
					<view class="topic">
						附件
					</view>
				</view>
				<view class="right" @click="uploade">
					+上传
				</view>
			</view>
			<view class="container">
				<view class="file-list">
					<empty v-if="resourceEmpty" desc="暂无附件" height="300"></empty>
					<view class="file-item" v-for="(item, index) in resourceList" :key="index" @click="openFile(item.url)">
						{{index + 1}}.{{item.url.split('.').pop()}}
						<view class="close" @click.stop="deleteFile(item.id)">
							<uni-icons type="closeempty" size="16" color="#4095E5"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="layout recode">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe680;</span>
					<view class="topic">
						操作记录
					</view>
				</view>
			</view>
			<view class="container">
				<empty v-if="operateEmpty" desc="暂无记录" height="300"></empty>
				<view v-else class="recode-container">
					<view class="recode-list" v-for="item in operateList" :key="item.id">
						<view class="item">
							<view class="info">
								<view class="user">
									<view class="circle"></view>
									<view class="avatar">
										<image src="@/static/images/avatar.png" mode="aspectFill"></image>
									</view>
									<view class="name">
										{{item.userName}}
									</view>
								</view>
								<view class="time">
									{{$share.getTime(item.createTime)}}
								</view>
							</view>
							<view class="action">
								{{item.subType}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty.vue";
	import {getPaymentListApi} from "@/api/paymentCollection_api.js";
	export default{
		components:{
			empty
		},
		data(){
			return {
				paymentEmpty: false,
				paymentList: [],
				resourceEmpty: false,
				resourceList: [],
				operateEmpty: false,
				operateList: [],
				params:{
					type: 'contract',
					contractId: this.contract.id,
					contractName: this.contract.name,
					customerId: this.contract.customerId,
					customerName: this.contract.customerName
				}
			}
		},
		props:{
			contract:Object
		},
		async mounted() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			})
			await this.getPaymentList();
			let resource = await this.$share.getResourceList(this.contract.id, 5);
			this.resourceEmpty = resource.empty;
			this.resourceList = [...resource.resourceList];
			let operate = await this.$share.getOperateList(this.contract.id, 'CRM 合同');
			this.operateEmpty = operate.empty;
			this.operateList = [...operate.list];
		},
		methods:{
			// 获得回款列表
			async getPaymentList(){
				this.paymentEmpty = false;
				let res = await getPaymentListApi({
					contractId: this.contract.id
				}).catch(() => {
					this.paymentEmpty = true;
					return Promise.reject();
				})
				res.data.list = res.data.list.map((item) => {
					let statusText = "";
					let color = "";
					let type = '';
					switch(item.status){
						case 0: {
							statusText = "待审核";
							color = "#f6d7ab";
							break;
						}
						case 1: {
							statusText = "生效";
							color = "#3388FF";
							break;
						}
						case 2: {
							statusText = "审核不通过";
							color = "#bd3124";
							break;
						}
						case 3: {
							statusText = "作废";
							color = "#F44444";
							break;
						}
						default: {
							statusText = "";
							color = ""
							break;
						}
					}
					switch(item.returnType){
						case 1: {
							type = "支票";
							break;
						}
						case 2: {
							type = "现金";
							break;
						}
						case 3: {
							type = "邮政汇款";
							break;
						}
						case 4: {
							type = "电汇";
							break;
						}
						case 5: {
							type = "网上转账";
							break;
						}
						case 6: {
							type = "支付宝";
							break;
						}
						case 7: {
							type = "微信支付";
							break;
						}
						case 8: {
							type = "其他";
							break;
						}
						default: {
							type = "暂无";
							break;
						}
					}
					return {
						...item,
						statusText,
						color,
						type
					}
				})
				this.paymentList = [...res.data.list];
				if(res.data.total == 0){
					this.paymentEmpty = true;
				}
			},
			// 上传项目资料
			uploade(){
				wx.chooseMessageFile({
				  count: 1,
				  type: 'file',
				  success: async (res) => {
						let data = await this.$share.uploade(this.contract.id, 5, res.tempFiles[0].path);
						if(data){
							uni.showLoading({
								mask: true,
								title: '加载中...'
							})
							let resource = await this.$share.getResourceList(this.contract.id, 5);
							this.resourceEmpty = resource.empty;
							this.resourceList = [...resource.resourceList];
						}
				  }
				})
			},
			// 预览文件
			openFile(file){
				if(this.$share.isImg(file)){
					let urls = [];
					urls[0] = file
					uni.previewImage({
						urls: urls
					})
				}else{
					this.$share.openFile(file);
				}
			},
			// 删除文件
			async deleteFile(id){
				let data = await this.$share.deleteFile(id);
				if(data){
					uni.showLoading({
						mask: true,
						title: '加载中...'
					})
					let resource = await this.$share.getResourceList(this.contract.id, 5);
					this.resourceEmpty = resource.empty;
					this.resourceList = [...resource.resourceList];
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.relevent{
		padding: 28rpx;
		.layout{
			@include box;
			margin: 0 0 18rpx;
			.header{
				padding: 18rpx 28rpx;
				@include flex-r-between-center;
				border-bottom: 4rpx #f7f7f7 solid;
				.left{
					@include flex-r-start-center;
					.icon{
						color: #101010;
						font-size: 38rpx;
						font-weight: bold;
					}
					.topic{
						padding-left: 8rpx;
						color: #000;
						font-size: 28rpx;
					}
				}
				.right{
					color: #4095E5;
					font-size: 24rpx;
				}
			}
			.container{
				padding: 0 28rpx;
			}
		}
		.payment{
			.container{
				.payment-list{
					padding: 0 0 6rpx;
					.item{
						padding: 16rpx 0;
						border-bottom: 4rpx #d2d2d2 solid;
						&:last-child{
							border-bottom: none;
						}
						.top{
							@include flex-r-between-center;
							padding: 0 0 10rpx;
							.title{
								color: #000;
								font-size: 26rpx;
							}
							.tag{
								min-width: 80rpx;
								height: 36rpx;
								line-height: 36rpx;
								text-align: center;
								color: #3BBF03;
								font-size: 20rpx;
								border-radius: 4rpx;
								border: 2rpx #3BBF03 solid;
							}
						}
						.bottom{
							@include flex-r-wrap;
							.bot-item{
								width: 50%;
								color: #9A9A9A;
								font-size: 24rpx;
								padding: 0 0 10rpx;
							}
							.max{
								width: 100%;
							}
						}
					}
				}
			}
		}
		.files{
			.container{
				.file-list{
						padding: 18rpx 0;
						.file-item{
							height: 52rpx;
							line-height: 52rpx;
							text-align: center;
							border-radius: 6rpx;
							background-color: #F3F6F9;
							color: #101010;
							font-size: 28rpx;
							margin-bottom: 10rpx;
							position: relative;
							.close{
								position: absolute;
								top: 0;
								right: 10rpx;
							}
						}
				}
			}
		}
		.recode{
			.container{
				.recode-container{
					padding: 26rpx 0 0;
					.recode-list{
						&:last-child{
							.item{
								.action{
									border: none;
								}
							}
						}
						.item{
							.info{
								@include flex-r-between-center;
								.user{
									@include flex-r-start-center;
									.circle{
										@include circle(16);
										background-color: #6C6C6C;
										margin-right: 36rpx;
									}
									.avatar{
										@include avatar(56);
									}
									.name{
										font-size: 26rpx;
										color: #000;
										padding-left: 30rpx;
									}
								}
								.time{
									font-size: 26rpx;
									color: #9A9A9A;
								}
							}
							.action{
								min-height: 62rpx;
								color: #000;
								font-size: 26rpx;
								padding-left: 124rpx;
								border-left: 4rpx #6C6C6C solid;
								margin-left: 6rpx;
							}
						}
					}
				}
			}
		}
	}
</style>